<template>
	<view>

		<image class="filtrate_card_header" src="/static/2.1/filtrate_card_header.png"></image>
		<view class="list">
			<view v-for="(item,index) in  clinicalRecruitmentTypeList" @click="btn_action(item)" class="btn"
				:class="{'select':item.id == select_item.id}">
				{{item.typeName}}
			</view>
			<view v-if="clinicalRecruitmentTypeList.length%3 != 0" class="btn last"></view>
		</view>


		<image class="filtrate_card_food" src="/static/2.1/filtrate_card_food.png"></image>
		
		<view></view>
	</view>

</template>

<script>
	export default {
		name: "filtrate_card",

		data() {
			return {
				clinicalRecruitmentTypeList: [],
				select_item: {}
			};
		},
		onLoad() {
			console.log('222')
		},
		mounted() {
			var that = this;
			uni.$off('itemClick');

			uni.$on('itemClick', (item) => {
				// that.itemClick(item)
				// this.select_item = item;
				that.btn_action(item);
			})
			this.get_data()
		},
		methods: {
			get_data() {
				// /website/clinicalRecruitmentTypeList
				var that = this;
				this.service("/website/clinicalRecruitmentTypeList", 'get', {

				}).then(res => {
					// that.details = res.data;
					console.log('临床招募 - 筛选条件')
					console.log(res)
					res.data.push({
						id: "",
						typeName: "全部"
					})
					that.clinicalRecruitmentTypeList = res.data
				})
			},
			btn_action(item) {
				this.select_item = item;
				let location_hash = window.location.hash;
				let routes = getCurrentPages()
				var that = this;
				let curRoute = routes[routes.length - 1].route //获取当前页面的路由
				console.log(routes)
				var go_url_hash = '#/pages/clinical_recruitment/clinical_recruitment';
				var go_url = 'pages/clinical_recruitment/clinical_recruitment';
				if (location_hash != go_url_hash) { // curRoute != go_url

					uni.navigateTo({
						url: '/' + go_url
					})
					setTimeout(() => {
						// uni.$emit() 
						uni.$emit('itemClick', item);
					}, 100)

				} else {
					this.$emit('itemClick', item);
				}
			}
		}
	}
</script>

<style lang="scss">
	.filtrate_card_header {
		width: 645rpx;
		height: 434rpx;
	}

	.filtrate_card_food {
		width: 645rpx;
		height: 404rpx;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		width: 645rpx;
		justify-content: space-between;

		.btn {
			// margin:10rpx auto;
			margin-top: 20rpx;
			// margin-right: auto;

			width: 185rpx;
			height: 75rpx;
			line-height: 75rpx;
			text-align: center;

			border-radius: 10rpx;
			background-color: #F0F0F0;

			color: #333333;

			&.select {
				color: #108E9C;
			}

			&.last {
				width: 185rpx;
				opacity: 0;
			}
		}
	}
</style>
